<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]='formGroup' class="formGroup">
    <div>
        <lv-form-item>
            <lv-form-label>{{'protection_incremental_mode_label' | i18n}}
            </lv-form-label>
            <lv-form-control>
                <lv-radio-group formControlName='mode' [lvGroupName]="'modeGroup'">
                    <lv-group [lvGutter]="'32px'">
                        <lv-radio [lvValue]="createFilesetMode.manual.value">
                            {{createFilesetMode.manual.label | i18n}}
                        </lv-radio>
                        <lv-radio [lvValue]="createFilesetMode.applicationTemplate.value">
                            {{createFilesetMode.applicationTemplate.label | i18n}}
                        </lv-radio>
                    </lv-group>
                </lv-radio-group>
            </lv-form-control>
        </lv-form-item>
    </div>
    <div
        [ngStyle]="{'display': formGroup.value.mode === createFilesetMode.applicationTemplate.value ? 'block': 'none'}">
        <lv-form-item *ngIf="formGroup.value.mode === createFilesetMode.applicationTemplate.value && !!rowItem">
            <lv-form-label lvRequired>{{'common_name_label' | i18n}}</lv-form-label>
            <lv-form-control [lvErrorTip]=" nameErrorTip">
                <input lv-input formControlName='name' [ngClass]="{'template-input': !rowItem}" />
            </lv-form-control>
        </lv-form-item>
        <lv-form-item>
            <lv-form-label lvRequired>
                {{'common_template_label' | i18n}}
            </lv-form-label>
            <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
                <lv-select formControlName="template_id" [lvOptions]='templateOptions' lvValueKey='uuid' lvShowFilter
                    lvFilterKey="label" lvFilterMode="contains" [ngClass]="{'template-select': !rowItem}"
                    [lvContentTemplate]="contentTpl">
                </lv-select>
                <ng-template #contentTpl let-item>
                    <lv-group lvGutter="4px">
                        <span lv-overflow>{{ item.label }}</span>
                        <span class="guide-recommend-label" *ngIf="showGuideNew(item)">
                            {{ 'protection_guide_new_resource_label' | i18n }}
                        </span>
                    </lv-group>
                </ng-template>
            </lv-form-control>
        </lv-form-item>
        <lv-form-item *ngIf="!rowItem">
            <lv-form-label lvRequired>
                {{'common_host_label' | i18n}}
            </lv-form-label>
            <lv-form-control [lvErrorTip]="hostErrorTip">
                <span class="aui-text-desc">{{'protection_template_host_desc_label' | i18n}}</span>
                <lv-group lvGutter='4px'>
                    <div class="all-table">
                        <lv-group class="table-title">
                            <span>{{'protection_selectable_host_label' | i18n}}</span>
                        </lv-group>
                        <ng-container *ngTemplateOutlet="tableTotalTpl;context: { $implicit: totalHostData}">
                        </ng-container>
                    </div>
                    <div class="arrow-container">
                        <i lv-icon="aui-select-arrow"></i>
                    </div>
                    <div class="selected-table">
                        <lv-group class="table-title">
                            <span>{{'protection_selected_host_label' | i18n}}</span>
                            <button lv-button (click)="resetSelection()" lvType="link">{{'protection_clear_all_label' |
                                i18n}}</button>
                        </lv-group>
                        <ng-container *ngTemplateOutlet="tableSelectionTpl;context: { $implicit: selectionHostClone}">
                        </ng-container>
                    </div>
                </lv-group>
            </lv-form-control>
        </lv-form-item>
        <lv-form-item *ngIf="!rowItem">
            <lv-form-label>
                {{'protection_associate_sla_label' | i18n}}
            </lv-form-label>
            <lv-form-control>
                <lv-switch formControlName='sla'></lv-switch>
            </lv-form-control>
        </lv-form-item>
        <div [ngStyle]="{'display': formGroup.value.sla ? 'block': 'none'}" class="select-sla-container"
            [ngClass]="{'template-select-sla-en': isEn, 'template-select-sla-zh': !isEn}">
            <lv-form-item>
                <lv-form-label lvRequired class="sla-form-label">
                    {{'SLA' | i18n}}
                </lv-form-label>
                <lv-form-control>
                    <div style="width: 687px;">
                        <aui-select-sla [filesetTemplate]="true"></aui-select-sla>
                    </div>
                    <aui-advanced-parameter #advanced></aui-advanced-parameter>
                </lv-form-control>
            </lv-form-item>
        </div>
    </div>
</lv-form>

<div [ngStyle]="{'overflow': formGroup.value.mode === createFilesetMode.manual.value ? 'visible': 'hidden'}"
    style="height: 0;">
    <aui-create-fileset [rowItem]="rowItem" [sub_type]="resourceType.fileset.value"></aui-create-fileset>
</div>


<ng-template #tableTotalTpl let-tabledata>
    <lv-datatable #lvTable [lvData]="tabledata" lvSelectionMode="multiple" [(lvSelection)]="selectionHost"
        [lvScroll]='{y: "480px"}' [lvPaginator]="pageT" lvSize="small" (lvSelectionChange)='selectionChange($event)'
        lvAsync lvCompareWith='uuid'>
        <thead>
            <tr>
                <th lvShowCheckbox width="40px"></th>
                <th lvCellKey="name" lvShowCustom>
                    {{ 'common_name_label' | i18n }}
                    <i lv-icon="lv-icon-search" [lvColorState]="true" [ngClass]="{ active: !!queryName }" lv-popover
                        [lvPopoverContent]="nameFilterTpl" lvPopoverTheme="light" lvPopoverPosition="bottom"
                        lvPopoverTrigger="click" #namePopover="lvPopover"></i>
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of lvTable.renderData">
                <tr>
                    <td width="40px" lvShowCheckbox [lvRowData]="item"></td>
                    <td>
                        <lv-group lvGutter='8px'>
                            <div lv-overflow>
                                <span>
                                    {{ item.environment?.name + ' ( ' + (item.environment?.extendInfo?.subNetFixedIp ||
                                    item.environment?.endpoint) + ' )' }}
                                </span>
                            </div>
                            <span class="guide-recommend-label" *ngIf="showHostGuideNew(item)">
                                {{'protection_guide_new_resource_label' | i18n}}
                            </span>
                        </lv-group>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <div *ngIf="total" class="aui-paginator-wrap fileset-custom-page">
        <lv-paginator #pageT lvMode="simple" [lvPageSize]="pageSize" [lvTotal]="total" [lvPageSizeOptions]="sizeOptions"
            [lvPageIndex]="pageIndex" (lvPageChange)="pageChange($event)">
        </lv-paginator>
    </div>
</ng-template>

<ng-template #tableSelectionTpl let-tabledata>
    <lv-datatable #lvTableS [lvData]="tabledata" [lvPaginator]="pageS" lvSize="small" [lvScroll]='{y: "480px"}'
        lvCompareWith='uuid'>
        <thead>
            <tr>
                <th lvCellKey="name" lvShowCustom>
                    {{ 'protection_host_path_label' | i18n }}
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let item of lvTableS.renderData">
                <tr>
                    <td>
                        <lv-group class="select-path-group">
                            <span lv-overflow class="path-overflow">
                                {{ item.environment?.name }}
                            </span>
                            <i lv-icon="lv-icon-close" lv-tooltip="{{'common_remove_label' | i18n}}"
                                lvTooltipTheme="light" lvColorState='true' (click)="removeSelection(item)"></i>
                        </lv-group>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </lv-datatable>
    <div class="aui-paginator-wrap fileset-custom-page">
        <lv-paginator #pageS [hidden]="!tabledata?.length" lvMode="simple" [lvTotal]="tabledata?.length"
            [lvPageSizeOptions]="sizeOptions"></lv-paginator>
    </div>
</ng-template>

<ng-template #nameFilterTpl>
    <lv-search [(ngModel)]="queryName" (lvSearch)="searchByName($event)" [lvFocus]="true"></lv-search>
</ng-template>